<template>
  <view class="permission-container">
    <!-- 顶部信息 -->
    <view class="header-section">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont icon-arrow-left"></text>
        </view>
        <text class="header-title">权限管理</text>
        <view class="header-actions">
          <view class="action-btn" @click="refreshPermissions">
            <text class="iconfont icon-refresh"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 当前用户信息 -->
    <view class="user-info-section">
      <view class="user-card">
        <image class="user-avatar" :src="currentUser.avatar" mode="aspectFill"></image>
        <view class="user-details">
          <text class="user-name">{{ currentUser.name }}</text>
          <view class="user-role">
            <text class="role-badge" :style="{ backgroundColor: roleInfo.color }">{{ roleInfo.displayName }}</text>
          </view>
          <text class="user-department">{{ currentUser.department }}</text>
        </view>
      </view>
    </view>

    <!-- 权限概览 -->
    <view class="permission-overview">
      <text class="section-title">权限概览</text>
      <view class="permission-grid">
        <view class="permission-item" v-for="(item, index) in permissionOverview" :key="index">
          <view class="permission-icon" :class="item.iconClass">
            <text class="iconfont" :class="item.icon"></text>
          </view>
          <view class="permission-content">
            <text class="permission-name">{{ item.name }}</text>
            <text class="permission-desc">{{ item.description }}</text>
          </view>
          <view class="permission-status" :class="item.statusClass">
            <text class="status-text">{{ item.status }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 页面权限 -->
    <view class="page-permissions">
      <text class="section-title">页面权限</text>
      <view class="permission-list">
        <view 
          class="permission-row" 
          v-for="(page, index) in pagePermissions" 
          :key="index"
        >
          <view class="page-info">
            <text class="page-name">{{ page.name }}</text>
            <text class="page-desc">{{ page.description }}</text>
          </view>
          <view class="permission-control">
            <view class="permission-toggle" :class="{ active: page.hasAccess }">
              <view class="toggle-slider"></view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作权限 -->
    <view class="operation-permissions">
      <text class="section-title">操作权限</text>
      <view class="permission-list">
        <view 
          class="permission-row" 
          v-for="(operation, index) in operationPermissions" 
          :key="index"
        >
          <view class="operation-info">
            <text class="operation-name">{{ operation.name }}</text>
            <text class="operation-desc">{{ operation.description }}</text>
          </view>
          <view class="permission-control">
            <view class="permission-toggle" :class="{ active: operation.hasPermission }">
              <view class="toggle-slider"></view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据权限 -->
    <view class="data-permissions">
      <text class="section-title">数据权限</text>
      <view class="permission-list">
        <view 
          class="permission-row" 
          v-for="(data, index) in dataPermissions" 
          :key="index"
        >
          <view class="data-info">
            <text class="data-name">{{ data.name }}</text>
            <text class="data-desc">{{ data.description }}</text>
          </view>
          <view class="permission-control">
            <view class="permission-toggle" :class="{ active: data.hasAccess }">
              <view class="toggle-slider"></view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 角色管理 -->
    <view class="role-management" v-if="isAdmin">
      <text class="section-title">角色管理</text>
      <view class="role-list">
        <view 
          class="role-item" 
          v-for="(role, index) in roleList" 
          :key="index"
          @click="editRole(role)"
        >
          <view class="role-info">
            <view class="role-avatar" :style="{ backgroundColor: role.color }">
              <text class="role-icon">{{ role.icon }}</text>
            </view>
            <view class="role-details">
              <text class="role-name">{{ role.name }}</text>
              <text class="role-desc">{{ role.description }}</text>
            </view>
          </view>
          <view class="role-actions">
            <text class="user-count">{{ role.userCount }}人</text>
            <text class="iconfont icon-chevron-right"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 权限日志 -->
    <view class="permission-logs" v-if="isAdmin">
      <text class="section-title">权限变更日志</text>
      <view class="log-list">
        <view 
          class="log-item" 
          v-for="(log, index) in permissionLogs" 
          :key="index"
        >
          <view class="log-icon" :class="log.typeClass">
            <text class="iconfont" :class="log.icon"></text>
          </view>
          <view class="log-content">
            <text class="log-title">{{ log.title }}</text>
            <text class="log-desc">{{ log.description }}</text>
            <text class="log-time">{{ log.time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="action-btn primary-btn" @click="savePermissions">
        保存权限设置
      </button>
      <button class="action-btn secondary-btn" @click="exportPermissions">
        导出权限配置
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { 
  ROLES, 
  getUserRole, 
  getRoleDisplayName, 
  getRoleColor,
  hasPagePermission,
  hasOperationPermission,
  permissionManager
} from '../../utils/permission.js'

// 响应式数据
const currentUser = reactive({
  name: '张经理',
  avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face',
  department: '采购部',
  role: getUserRole()
})

const roleInfo = computed(() => {
  return {
    displayName: getRoleDisplayName(currentUser.role),
    color: getRoleColor(currentUser.role)
  }
})

const isAdmin = computed(() => {
  return currentUser.role === ROLES.ADMIN
})

const permissionOverview = ref([
  {
    name: '页面访问',
    description: '可访问的页面数量',
    icon: 'icon-eye',
    iconClass: 'blue-icon',
    status: '8个页面',
    statusClass: 'success-status'
  },
  {
    name: '操作权限',
    description: '可执行的操作数量',
    icon: 'icon-cog',
    iconClass: 'green-icon',
    status: '12个操作',
    statusClass: 'success-status'
  },
  {
    name: '数据权限',
    description: '可访问的数据范围',
    icon: 'icon-database',
    iconClass: 'purple-icon',
    status: '部分数据',
    statusClass: 'warning-status'
  }
])

const pagePermissions = ref([
  {
    name: '首页',
    description: '查看系统概览和统计数据',
    hasAccess: true
  },
  {
    name: '车辆列表',
    description: '查看和管理车辆信息',
    hasAccess: true
  },
  {
    name: '车辆详情',
    description: '查看车辆详细信息',
    hasAccess: true
  },
  {
    name: '流程监控',
    description: '监控业务流程进度',
    hasAccess: true
  },
  {
    name: '预警中心',
    description: '查看和处理预警信息',
    hasAccess: true
  },
  {
    name: '采购管理',
    description: '管理采购相关业务',
    hasAccess: currentUser.role === ROLES.PURCHASER || currentUser.role === ROLES.ADMIN
  },
  {
    name: '过户管理',
    description: '管理过户相关业务',
    hasAccess: currentUser.role === ROLES.BUSINESS || currentUser.role === ROLES.ADMIN
  },
  {
    name: '物流管理',
    description: '管理物流相关业务',
    hasAccess: currentUser.role === ROLES.LOGISTICS || currentUser.role === ROLES.ADMIN
  }
])

const operationPermissions = ref([
  {
    name: '新增车辆',
    description: '创建新的车辆记录',
    hasPermission: permissionManager.canPerformOperation('create')
  },
  {
    name: '编辑车辆',
    description: '修改车辆信息',
    hasPermission: permissionManager.canPerformOperation('edit')
  },
  {
    name: '删除车辆',
    description: '删除车辆记录',
    hasPermission: permissionManager.canPerformOperation('delete')
  },
  {
    name: '更新状态',
    description: '更新车辆处理状态',
    hasPermission: permissionManager.canPerformOperation('update')
  },
  {
    name: '查看报告',
    description: '查看检测报告',
    hasPermission: permissionManager.canPerformOperation('view', 'report')
  },
  {
    name: '管理资料',
    description: '管理车辆相关资料',
    hasPermission: permissionManager.canPerformOperation('manage', 'documents')
  }
])

const dataPermissions = ref([
  {
    name: '采购数据',
    description: '查看采购相关数据',
    hasAccess: currentUser.role === ROLES.PURCHASER || currentUser.role === ROLES.ADMIN
  },
  {
    name: '过户数据',
    description: '查看过户相关数据',
    hasAccess: currentUser.role === ROLES.BUSINESS || currentUser.role === ROLES.ADMIN
  },
  {
    name: '物流数据',
    description: '查看物流相关数据',
    hasAccess: currentUser.role === ROLES.LOGISTICS || currentUser.role === ROLES.ADMIN
  },
  {
    name: '财务数据',
    description: '查看财务相关数据',
    hasAccess: currentUser.role === ROLES.FINANCE || currentUser.role === ROLES.ADMIN
  },
  {
    name: '系统数据',
    description: '查看系统配置数据',
    hasAccess: currentUser.role === ROLES.ADMIN
  }
])

const roleList = ref([
  {
    name: '采购员',
    description: '负责车辆采购全流程',
    icon: '👤',
    color: '#3b82f6',
    userCount: 5
  },
  {
    name: '业务员',
    description: '负责过户和出口业务',
    icon: '👤',
    color: '#10b981',
    userCount: 3
  },
  {
    name: '物流专员',
    description: '负责物流运输安排',
    icon: '👤',
    color: '#f97316',
    userCount: 2
  },
  {
    name: '数据维护员',
    description: '负责数据录入和维护',
    icon: '👤',
    color: '#8b5cf6',
    userCount: 1
  },
  {
    name: '财务专员',
    description: '负责财务管理',
    icon: '👤',
    color: '#ef4444',
    userCount: 1
  }
])

const permissionLogs = ref([
  {
    title: '权限分配',
    description: '为张经理分配了采购员角色',
    time: '2024-01-15 10:30',
    type: 'assign',
    typeClass: 'success-log',
    icon: 'icon-check-circle'
  },
  {
    title: '权限修改',
    description: '修改了业务员的过户管理权限',
    time: '2024-01-14 16:45',
    type: 'modify',
    typeClass: 'warning-log',
    icon: 'icon-edit'
  },
  {
    title: '权限撤销',
    description: '撤销了李四的系统管理权限',
    time: '2024-01-13 09:15',
    type: 'revoke',
    typeClass: 'error-log',
    icon: 'icon-times-circle'
  }
])

// 方法
const goBack = () => {
  uni.navigateBack()
}

const refreshPermissions = () => {
  uni.showToast({
    title: '权限已刷新',
    icon: 'success'
  })
}

const editRole = (role) => {
  uni.navigateTo({
    url: `/pages/role-edit/role-edit?role=${role.name}`
  })
}

const savePermissions = () => {
  uni.showLoading({
    title: '保存中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '权限设置已保存',
      icon: 'success'
    })
  }, 1000)
}

const exportPermissions = () => {
  uni.showToast({
    title: '权限配置已导出',
    icon: 'success'
  })
}

// 生命周期
onMounted(() => {
  loadPermissionData()
})

const loadPermissionData = () => {
  // 这里可以调用API获取权限数据
  console.log('加载权限数据')
}
</script>

<style scoped>
.permission-container {
  background-color: #f8fafc;
  min-height: 100vh;
}

.header-section {
  background: white;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  width: 32px;
  height: 32px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.user-info-section {
  background: white;
  margin: 16px;
  border-radius: 12px;
  padding: 16px;
}

.user-card {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 16px;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 4px;
}

.user-role {
  margin-bottom: 4px;
}

.role-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
}

.user-department {
  font-size: 14px;
  color: #6b7280;
}

.permission-overview,
.page-permissions,
.operation-permissions,
.data-permissions,
.role-management,
.permission-logs {
  background: white;
  margin: 16px;
  border-radius: 12px;
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 16px;
}

.permission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.permission-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.permission-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.blue-icon {
  background: #dbeafe;
  color: #3b82f6;
}

.green-icon {
  background: #dcfce7;
  color: #10b981;
}

.purple-icon {
  background: #f3e8ff;
  color: #8b5cf6;
}

.permission-content {
  flex: 1;
}

.permission-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  display: block;
  margin-bottom: 2px;
}

.permission-desc {
  font-size: 12px;
  color: #6b7280;
}

.permission-status {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.success-status {
  background: #dcfce7;
  color: #10b981;
}

.warning-status {
  background: #fef3c7;
  color: #f59e0b;
}

.permission-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.page-info,
.operation-info,
.data-info {
  flex: 1;
}

.page-name,
.operation-name,
.data-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  display: block;
  margin-bottom: 2px;
}

.page-desc,
.operation-desc,
.data-desc {
  font-size: 12px;
  color: #6b7280;
}

.permission-control {
  display: flex;
  align-items: center;
}

.permission-toggle {
  width: 40px;
  height: 24px;
  background: #d1d5db;
  border-radius: 12px;
  position: relative;
  transition: background-color 0.3s;
}

.permission-toggle.active {
  background: #3b82f6;
}

.toggle-slider {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: transform 0.3s;
}

.permission-toggle.active .toggle-slider {
  transform: translateX(16px);
}

.role-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.role-info {
  display: flex;
  align-items: center;
}

.role-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.role-icon {
  font-size: 16px;
}

.role-details {
  flex: 1;
}

.role-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  display: block;
  margin-bottom: 2px;
}

.role-desc {
  font-size: 12px;
  color: #6b7280;
}

.role-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-count {
  font-size: 12px;
  color: #6b7280;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.log-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.log-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.success-log {
  background: #dcfce7;
  color: #10b981;
}

.warning-log {
  background: #fef3c7;
  color: #f59e0b;
}

.error-log {
  background: #fee2e2;
  color: #ef4444;
}

.log-content {
  flex: 1;
}

.log-title {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  display: block;
  margin-bottom: 2px;
}

.log-desc {
  font-size: 12px;
  color: #6b7280;
  display: block;
  margin-bottom: 4px;
}

.log-time {
  font-size: 12px;
  color: #9ca3af;
}

.action-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
}

.primary-btn {
  background: #3b82f6;
  color: white;
}

.secondary-btn {
  background: #f3f4f6;
  color: #6b7280;
}
</style> 